<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- <script src="./shunfeng.css"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<!-- 方法二 -->
    <style>
        #box1 {
            width: 920px;
            height:60px;
            display: flex;
            display: -webkit-flex;
            margin: auto;
        }
        .nav{
            display: flex;
            display: -webkit-flex;
            width: 600px; 
            height:40px;
          
            
            flex:1;
        }
        
        .nav .item1 {
            flex-grow: 1;
             margin:10px; 
             height:40px;
             line-height: 30px;
            
        }
        #box1 .zhuce{
            margin:10px; 
            line-height: 30px;
        }

        #box2{
            width:100%;
            height: 600px;
            border-bottom: 1px solid black;
            display: flex;
            display: -webkit-flex;
            margin: auto;
        }
        #box2 #left{
           
            display: flex;
            display: -webkit-flex;
            align-content:center;
            align-items:center ;
            margin: auto;
             /* position: absolute; */
            font-size: 28px;
            width: 40px;
            height:35px;
            background: darkgray;
            opacity: 0.5;
            cursor: pointer;
        }
        #box2 #right{
           
            display: flex;
            display: -webkit-flex;
            align-content:center;
            align-items:center ;
            margin: auto;
            font-size: 28px;
            width: 40px;
            height: 35px;
            background: darkgray;
            opacity: 0.5;
            text-align:right;
            cursor: pointer;
        }
        #box2  ul{
        position: absolute;
        left: 10%;
        top:170px
    }
    #box2 li{
        list-style: none;
        width: 20px;
        height: 10px;
        background: silver;
        opacity: 0.5;
        float: left;
        margin-left: 1px;
      
          
  
    }
    #box2 .bgc{
        background: red
    }
    #box3{
        display: flex;
        display: -webkit-flex;
        
    }
    #box3 h2{
        margin:40px auto;
    }
    #box4{
        display: flex;
        display: -webkit-flex;
        align-content:center; 
        margin:auto;
        border-bottom:3px solid #999;
        
    }
    #box4 div{
        width:150px;
        background: pink;
        margin:auto;
        text-align: center;
        cursor: pointer;
    }
    
    /* tab切换 */
    .xuanzhong{
        border-bottom:1px solid orange;
        color: orange;
    }
    #chaoda{
      
        /* display: flex;
        display: -webkit-flex;
        align-content:center; 
        margin:auto; */
    }
   #box5{ 
        /* display: flex;
        display: -webkit-flex;
         align-content:center; 
         margin:auto;
        display: none; 
        flex: 1; 
        display: flex;
        display: -webkit-flex;
        width: 100%;
  
        flex-flow: row nowrap;
        justify-content: space-around;
        align-items: center;
    border: 1px solid red;*/
    } 
  
     #box5{
        display: flex;
        display: -webkit-flex;
        margin:auto;
        justify-content: center;
        align-items: center;
        border: 1px solid red;
       
    }

    /* #box6{
        display: flex;
        display: -webkit-flex;
        align-content:center; 
        margin:auto;
    }
    #box6 dl{
     
        
        margin:auto;
        text-align: center;
    }
    #box7{
        display: flex;
        display: -webkit-flex;
        align-content:center; 
        margin:auto;
    }
    #box7 dl{
     
        
        margin:auto;
        text-align: center;
    }
    #box8{
        display: flex;
        display: -webkit-flex;
        align-content:center; 
        margin:auto;
    }
    #box8 dl{
     
        
        margin:auto;
        text-align: center;
    }
    #box9{
        display: flex;  
        display: -webkit-flex;
        align-content:center; 
        margin:auto;
    }
    #box9 dl{
     
        
        margin:auto;
        text-align: center;
    } */
   
    </style>
</head>

<body>

    <div id="box1">
        <div><img src="./imges/loge.png" alt="" width="60px"></div>
        <div class="nav">
            <div class="item1">首页</div>
            <div class="item1">物流服务</div>
            <div class="item1">智慧科技</div>
            <div class="item1">服务支持</div>
            <div class="item1">可持续发展</div>
            <div class="item1">投资者关系</div>
            <div class="item1"> 关于我们</div>
        </div>
        <div class="zhuce">
            <i class="glyphicon glyphicon-user"></i>
            快速登录/注册
        </div>
    </div>

    <div id="box2" style="position: relative;">
        <div  id='left'>←</div>
        <img id="banner" src="./imges/1.jpg" alt="" width="70%">
        <div id="right">→</div>
        <ul></ul>
    </div>
    <div id="box3">
       <h2>物流服务介绍</h2> 
    </div>
    <div id="box4">
        <div><h4>快递服务</h4></div>
        <div><h4>快运服务</h4></div>
        <div><h4>冷运服务</h4></div>
        <div><h4>医药服务</h4></div>
        <div><h4>国际服务</h4></div>
    </div>
  
        <div id="box5" style="display:block">
           
            <dl>
                <dt>
                    <img src="./imges/4.jpg" alt="" width="300px">
                </dt>
                <dd>
                <h4> 顺丰特快</h4>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务
                </dd>
            </dl>
      
            <dl>
                <dt>
                    <img src="./imges/5.jpg" alt="" width="300px">
                </dt>
                <dd>
                <h4> 顺丰特快</h4>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务
                </dd>
            </dl>
       
        </div>
        <!-- <div id="box6">
            <dl>
                <dt>
                    <img src="./imges/6.png" alt="" width="600px">
                </dt>
                <dd>
                <h4> 顺丰特快</h4>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务
                </dd>
            </dl>
            <dl>
                <dt>
                    <img src="./imges/6.png" alt="" width="600px">
                </dt>
                <dd>
                <h4> 顺丰特快</h4>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务
                </dd>
            </dl>
        </div>
        <div id="box7">
            <dl>
                <dt>
                    <img src="./imges/7.jpg" alt="" width="600px">
                </dt>
                <dd>
                <h4> 顺丰特快</h4>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务
                </dd>
            </dl>
            <dl>
                <dt>
                    <img src="./imges/7.jpg" alt="" width="600px">
                </dt>
                <dd>
                <h4> 顺丰特快</h4>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务
                </dd>
            </dl>
        </div>
        <div id="box8">
            <dl>
                <dt>
                    <img src="./imges/4.jpg" alt="" width="600px">
                </dt>
                <dd>
                <h4> 顺丰特快</h4>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务
                </dd>
            </dl>
            <dl>
                <dt>
                    <img src="./imges/4.jpg" alt="" width="600px">
                </dt>
                <dd>
                <h4> 顺丰特快</h4>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务
                </dd>
            </dl>
        </div>
        <div id="box9">
            <dl>
                <dt>
                    <img src="./imges/5.jpg" alt="" width="600px">
                </dt>
                <dd>
                <h4> 顺丰特快</h4>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务
                </dd>
            </dl>
            <dl>
                <dt>
                    <img src="./imges/5.jpg" alt="" width="600px">
                </dt>
                <dd>
                <h4> 顺丰特快</h4>为您提供“快速、准时、稳定”的高品质、门到门的标准快递服务
                </dd>
            </dl>
        </div> -->


    <script>

        // 选项卡
        // $("box4>div").click(function () {
        //     $(this).addClass("xuanzhong").siblings().removeClass("xuanzhong")
        //     var inde = $(this).index()
        //     console.log(inde)
        //     $("#chaoda>div").eq(inde).show().siblings().hide()
        //     //siblings() =>除了它本身 #box div ，其它的同级元素
        // })


         /* 轮播图 */
        //通过图片路径使图片轮播，点击按钮轮播，点击方块轮播
        var img = ["./imges/1.jpg","./imges/2.jpg","./imges/3.jpg"]
         var index = 0
        $(function(){
            var str = ""
           // console.log(img)
            // for(var i=0;i<img;i++){
            //     str+=`<li></li>`
            // }
            for(i in img){
                str+=`<li></li>`
            }
            $("ul").html(str)
            $("li").click(function(){
              var index = $(this).index()
              $("#banner").prop("src",img[index])
              lis(index)
            })
            setInterval(function(){
                $("#banner").prop("src",img[index])
                index = index==4?0:index+1  //【方法一】：三目运算符 
                // index++      //【方法二】：if判断，要将索引 index++ ，且判断条件要大于索引个数
                // if(index>4){
                //     index=0
                // }
                lis(index)
            },2000)
            $("#left").click(function(){
              
                $("#banner").prop("src",img[index])
                 index--         //【方法二】：if判断，要将索引 index-- ，且判断条件要小于于索引个数
                if(index<0){ 
                    index=4
                }
               // index = index==0?4:index-1    //【方法一】：三目运算符 
                console.log(img[index])
                lis(index)
            })
            $("#right").click(function(){
                $("#banner").prop("src",img[index])
                // index++
                // if(index>4){
                //     index=0
                // }
                console.log(img[index])
                index = index==4?0:index+1
                lis(index)
            })
        })
        function lis(index){ //封装一个函数
            $('li').prop('class','')
            $('li:eq('+index+')').prop('class','bgc')
            //  $("li").removeClass("bgc").eq(img[index]).addClass("bgc")
        }
        
    </script>
</body>

</html>